<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>Switch 开关</title>
	<!-- <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" /> -->
	<link rel="stylesheet" href="../static/css/element2.css">
	<script src="../static/js/vue.global.prod.js"></script>
	<!-- <script src="//unpkg.com/element-plus"></script> -->
	<script src="../static/js/element-plue2.js"></script>
	
	<script src="../static/js/icons-vue.js"></script>
	
	<link rel="stylesheet" href="../static/css/com.css">

</head>
<body>
<div id="app" class="">
	<el-divider content-position="left">基础用法</el-divider><!-- =============================================================== -->
	<p class="desc">绑定 v-model 到一个 Boolean 类型的变量。 --el-switch-on-color 和 --el-switch-off-color 变量决定两种状态下的背景颜色</p>
	默认的：<el-switch v-model="value1" ></el-switch>
	自定义颜色的：<el-switch v-model="value2" @change="switchChange" inline-prompt active-color="#13ce66" inactive-color="#ff4949" active-value="open" inactive-value="close" active-text="开" inactive-text="关"/></el-switch>
	
	<el-divider content-position="left">尺寸</el-divider><!-- =============================================================== -->
	<el-switch v-model="value" active-text="Open" inactive-text="Close" size="large"/></el-switch><br />
	<el-switch v-model="value" active-text="Open" inactive-text="Close"/></el-switch><br />
	<el-switch v-model="value" active-text="Open" inactive-text="Close" size="small"/></el-switch>
	
	<el-divider content-position="left">文字描述</el-divider><!-- =============================================================== -->
	<p class="desc">使用active-text属性与inactive-text属性来设置开关的文字描述。 使用 inline-prompt 属性来控制文本是否显示在点内。</p>
	<p class="desc">使用active-text属性与inactive-text属性来设置开关的文字描述</p>
	<el-switch v-model="value1" active-text="月付" inactive-text="年付"></el-switch><br />
	<el-switch v-model="value2" active-color="#13ce66" inactive-color="#ff4949" active-text="月付" inactive-text="年付"></el-switch><br />
	<el-switch v-model="value3" inline-prompt active-text="是" inactive-text="否"></el-switch> &nbsp;
	<el-switch v-model="value4" inline-prompt active-color="#13ce66" inactive-color="#ff4949" active-text="Y" inactive-text="N"></el-switch> &nbsp;
	<!-- 超出问题，需要升级版本 -->
	<el-switch v-model="value3" inline-prompt class="ml-2" width="40px" active-text="超出省略" inactive-text="超出省略"></el-switch> &nbsp;
	<!-- 这会设置全局颜色样式 -->
	<!-- <el-switch v-model="value7" inline-prompt class="ml-2" active-text="完整展示多个内容" inactive-text="多个内容" style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"></el-switch> &nbsp; -->
	<el-switch v-model="value7" inline-prompt class="ml-2" width="120px" active-text="完整展示多个内容" inactive-text="多个内容" active-color="#13ce66" inactive-color="#ff4949"></el-switch> &nbsp;
	
	<el-divider content-position="left">显示自定义图标</el-divider><!-- =============================================================== -->
	<p class="desc">使用 inactive-icon 和 active-icon 属性来添加图标。 使用 inline-prompt 属性来控制图标显示在点内。</p>
	<el-switch v-model="value1" :active-icon="Icons.Check" :inactive-icon="Icons.Close" /></el-switch><br />
	<el-switch v-model="value2" class="mt-2" style="margin-left: 24px" inline-prompt :active-icon="Icons.Check" :inactive-icon="Icons.Close" /></el-switch>
	
	<el-divider content-position="left">扩展的 value 类型</el-divider><!-- =============================================================== -->
	<p class="desc">设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。 接受Boolean, String或Number类型的值。</p>
	<el-tooltip :content="'Switch value: ' + value5" placement="top">
		<el-switch v-model="value5" active-color="#13ce66" inactive-color="#ff4949" active-value="100" inactive-value="0"></el-switch>
	</el-tooltip>
	<el-tooltip :content="'是否开启：' + value5_1" placement="top">
		<el-switch v-model="value5_1" inline-prompt active-color="#13ce66" inactive-color="#ff4949" active-value="is" inactive-value="no" active-text="是" inactive-text="否"></el-switch>
	</el-tooltip>
	
	<el-divider content-position="left">禁用状态</el-divider><!-- =============================================================== -->
	<p class="desc">设置disabled属性，接受一个Boolean，设置true即可禁用。</p>
	<el-switch v-model="value1" disabled></el-switch>&nbsp;
	<el-switch v-model="value2"></el-switch>
	
	<el-divider content-position="left">加载中</el-divider><!-- =============================================================== -->
	<p class="desc">设置loading属性，接受一个Boolean，设置true即加载中状态</p>
	<el-switch v-model="value1" loading></el-switch>&nbsp;
	<el-switch v-model="value4" loading></el-switch>
	
	<el-divider content-position="left">阻止切换</el-divider><!-- =============================================================== -->
	<p class="desc">设置beforeChange属性，若返回 false 或者返回 Promise 且被 reject，则停止切换。</p>
	<el-switch v-model="value6" :loading="loading1" :before-change="beforeChange1" /></el-switch>&nbsp;
	<el-switch v-model="value7" class="ml-2" :loading="loading2" :before-change="beforeChange2" /></el-switch>
	
</div>
</body>
<script>
const Main = {
	data() {
		return {
			Icons: ElementPlusIconsVue,
			// Check: ElementPlusIconsVue.Check,
			// Close: ElementPlusIconsVue.Close,
			// ElMessage: ElMessage,
			value: true,
			value1: true,
			value2: true,
			value3: true,
			value4: false,
			value5: 100,
			value5_1: "is",
			value6: false,
			value7: false,
			loading1: false,
			loading2: false,
		}
	},
	methods:{
		formatTooltip(val){
			return val / 100
		},
		switchChange(val){
			console.log(val);
		},
		beforeChange1(){
			this.loading1 = true
			return new Promise((resolve) => {
				setTimeout(() => {
					this.loading1 = false
					// this.ElMessage.success('Switch success')
					this.$message.success('Switch success')
					console.log('Switch success');
					return resolve(true)
				}, 500)
			})
		},
		beforeChange2(){
			this.loading2 = true
			return new Promise((_, reject) => {
				setTimeout(() => {
					this.loading2 = false
					// ElMessage.error('Switch failed')
					this.$message.warning('Switch failed')
					console.log('Switch failed');
					return reject(new Error('Error'))
				}, 500)
			})
		}
	},
}
const app = Vue.createApp(Main);
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
	app.component(key, component)
}
app.use(ElementPlus);
let vm = app.mount("#app");
// console.log(ElementPlus)
</script>
</html>
